import Vue from "vue";
import VueRouter from "vue-router";


const VueRouterPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err);
}

const VueRouterReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function push(to) {
  return VueRouterReplace.call(this, to).catch(err => err);
}

Vue.use(VueRouter);

const router = new VueRouter({
    mode:'history',
    routes:[
        {path:'/',redirect:'/login'},
        {path:'/my/:id/:name',name:'My',component:()=>import('@/views/My'),props:true},
        
        {path:'/login',name:'Login',component:()=>import('@/views/Login'),
            meta:{
                title:'登录'
            }
        },
        {path:'/home',name:'Home',component:()=>import('@/views/home/index'),
            children:[
                {path:'a',name:'A',component:()=>import('@/views/home/A')},
                {path:'b/:id/:name',name:'B',component:()=>import('@/views/home/B')},
                {
                    path:'c/:id/:name',
                    name:'C',
                    component:()=>import('@/views/home/C'),
                    // 第一种写法
                    // props:{id:1,name:'老丁'},
                    // 第二种写法
                    // props:true
                    // 第三种写法
                    props($route){
                        return {
                            id:$route.params.id,
                            name:$route.params.name,
                            age:$route.query.age
                        }
                    }
                }
            ],
            meta:{
                requireAuth:true,
                title:'主页',
                role:['admin']
            }
        },
        {
            path:'/user',
            // redirect:'/user/index',
            name:'User',
            component:()=>import('@/views/user/index'),
            children:[
                {
                    path:'/',redirect:'/user/ListUser'
                },
                {
                    path:'ListUser',name:'ListUser',component:()=>import('@/views/user/ListUser')
                },
                {
                    path:'addUser',name:'AddUser',component:()=>import('@/views/user/AddUser')
                },
                {
                    path:'updateUser',
                    name:'UpdateUser',
                    component:()=>import('@/views/user/UpdateUser'),
                    props($route){
                        return {
                            employeeId:$route.params.employeeId,
                        }
                    }
                }
            ]
        }
    ]
});

//全局路由守卫
//to ：到那个组件   from:启始组件
router.beforeEach((to, from, next) => {
    // 如果目标路径与当前路径相同，则直接调用 next() 而不做任何事情
    console.log('to', to.path);
    const role1 = 'admin'
    // 检查路由是否需要认证
    if (to.matched.some(record => record.meta.requireAuth)) {
        // 检查用户角色是否满足路由要求
        if (to.meta.requireAuth && !to.meta.role.includes(role1)) {
            // 如果用户角色不是管理员，则重定向到登录页面
            next({ name: 'Login' });
        } else {
            // 用户角色匹配，允许访问
            next();
            document.title = to.meta.title
        }
    } else {
        // 不需要认证的路由，直接允许访问
        document.title = to.meta.title
        next();
    }
});
export default router;
